<script setup lang="ts">
import type { NuxtError } from "#app";

defineProps<{
  error: NuxtError;
}>();

useSeoMeta({
  title: "Page not found",
  description: "We are sorry but this page could not be found.",
});

useHead({
  htmlAttrs: {
    lang: "en",
  },
});
</script>

<template>
  <el-container
    style="
      min-height: 100vh;
      align-items: center;
      justify-content: center;
      display: flex;
      flex-direction: column;
    "
  >
    <el-result
      icon="error"
      title="页面未找到"
      sub-title="我们很抱歉，您访问的页面不存在或已被删除。"
    >
      <template #extra>
        <el-button type="primary" @click="$router.push('/')">返回首页</el-button>
      </template>
      <template #subTitle>
        <div style="color: #999; font-size: 14px">
          <span v-if="error?.statusCode">错误码：{{ error.statusCode }}</span>
          <span v-if="error?.message">，{{ error.message }}</span>
        </div>
      </template>
    </el-result>
  </el-container>
</template>
